<template>
  <!-- 查询条件信息 -->
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="妊检日期">
        <el-date-picker v-model="form.StarttDate" type="date" placeholder="开始时间" style="width: 100%" />
      </el-form-item>
      <el-form-item label=" ">
        <el-date-picker v-model="form.EndDate" type="date" placeholder="结束时间" style="width: 100%" />
      </el-form-item>
      <el-form-item label="种母耳号">
        <el-input v-model="form.SheepHistoryEarNumber" placeholder="请选择种母耳号" />
      </el-form-item>
      <el-form-item label="负责人">
        <el-select v-model="form.region" placeholder="请输入负责人" style="width: 200px">
          <el-option label="张三" value="张三" />
          <el-option label="李四" value="李四" />
        </el-select>
      </el-form-item>
      <el-form-item label="妊检结果">
        <el-select v-model="form.region" placeholder="请输入负责人" style="width: 200px">
          <el-option label="空胎" value="空胎" />
          <el-option label="返情" value="返情" />
          <el-option label="流产" value="流产" />
          <el-option label="怀孕" value="怀孕" />
          <el-option label="未孕" value="未孕" />
        </el-select>
      </el-form-item>
      <el-form-item label="同胞数">
        <el-select v-model="form.region" placeholder="请输入负责人" style="width: 200px">
          <el-option label="未知" value="未知" />
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
          <el-option label="4" value="4" />
          <el-option label="5" value="5" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="SearchonSubmit">查询</el-button>
        <el-button @click="ReplaceonSubmit">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-button type="danger">新增</el-button>
    <el-button type="danger">删除</el-button>
    <el-button type="danger">审核</el-button>
  </div>
  <!-- 显示信息 -->
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="序号" />
      <el-table-column prop="name" label="妊检日期" />
      <el-table-column prop="name" label="耳号" />
      <el-table-column prop="name" label="妊检结果" />
      <el-table-column prop="name" label="妊检方式" />
      <el-table-column prop="name" label="同胞数" />
      <el-table-column prop="name" label="妊娠天数" />
      <el-table-column prop="name" label="当前栋舍" />
      <el-table-column prop="name" label="当前栏位" />
      <el-table-column prop="name" label="转入栋舍" />
      <el-table-column prop="name" label="转入栏位" />
      <el-table-column prop="address" label="备注" />
      <el-table-column prop="address" label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>

  <!-- 分页信息 -->
  <div>
    <!-- 分页 -->
    <table>
      <tr>
        <!-- 1. -->
        <td>
          <el-pagination v-model:current-page="form.PageIndex" v-model:page-size="form.PageSeize"
            :page-sizes="[1, 3, 6, 9]" :size="form.PageSeize" :background="true" layout="total,slot, sizes"
            :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
            数据，每页显示{{ form.PageSeize }}条数据，当前第1/{{
              form.PageIndex
            }}页，共{{ form.pageCount }}页。
          </el-pagination>
        </td>
        <!-- 2. -->
        <td>
          <el-pagination v-model:current-page="form.PageIndex" v-model:page-size="form.PageSeize"
            :page-sizes="[1, 3, 6, 9]" :size="form.PageSeize" :background="true" layout="slot,prev, pager"
            :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
            <el-button @click="handleCurrentChange(1)">首页</el-button>
          </el-pagination>
        </td>
        <!-- 3. -->
        <td>
          <el-pagination v-model:current-page="form.PageIndex" v-model:page-size="form.PageSeize"
            :page-sizes="[1, 3, 6, 9]" :size="form.PageSeize" :background="true" layout="next,slot, jumper"
            :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
            <el-button @click="handleCurrentChange(form.pageCount)">尾页</el-button>
          </el-pagination>
        </td>
      </tr>
    </table>
  </div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import { reactive, ref, onMounted } from 'vue'
import axios from 'axios';
const router = useRouter();
const route = useRoute();
// 查询显示信息
const form = reactive({
  // 查询条件
  StarttDate: '',
  EndDate: '',
  SheepHistoryEarNumber: '',
  // 分页信息
  PageIndex: 1,
  PageSeize: 3,
  totalCount: 0,
  pageCount: 0
})
//分页
const handleSizeChange = (val: number) => {
  form.PageSeize = val;
};
const handleCurrentChange = (val: number) => {
  form.PageIndex = val;
};
const tableData = ref([])
</script>
<style scoped></style>